<template>
  <div>
    <el-dialog title="提示" :visible.sync="sortStatus" width="80%" :before-close="handleClose">
      <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
        <transition-group>
          <div v-for="(element,index) in colors" :key="element.text"  class="box">
            <span> {{index}}</span>
            <el-button @click="showBtn(index)">chakan</el-button>
            <el-checkbox v-model="element.sta" @change="checkTui"></el-checkbox>
            <span  class = "drag-item">
                {{element.text}}
            </span>
          </div>
        </transition-group>
      </draggable>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkfun">取 消</el-button>
        <el-button type="primary" @click="showfun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  export default {
    props:{
      sortStatus:{
        type:Boolean,
        default:false,
      }
    },
    data() {
      return {
        colors: [
            {
              sta:true,
                text: "Aquamarine1",
            }, 
            {
              sta:true,
              
                text: "Hotpink2",
            }, 
            {
              sta:true,
              
                text: "Gold3",
            }, 
            {
              sta:true,
              
                text: "Crimson4",
            }, 
            {
              sta:true,                      
                text: "Blueviolet5",
            },
            {
                text: "Lightblue6",
            }, 
            {
                text: "Cornflowerblue7",
            }, 
            {
                text: "Skyblue8",
            }, 
            {
                text: "Skybfdsfdsfdsfdsfdsafsdafsdalue9",
            }, 
            {
                text: "Skyblue10",
            }, {
                text: "Skyblue11",
            }, {
                text: "Skyblue12",
            }, {
                text: "Skyblue13",
            }, {
                text: "Skyblue14",
            }, {
                text: "Skyblue815",
            }, {
                text: "Skyblue16",
            }, {
                text: "Skyblue17",
            }, {
                text: "Skyblue18",
            }, 
            {
                text: "Burlywood19",
            }
        ]}
    },
    components: {
        draggable
    },
    
    methods: {
      datadragEnd (evt) {
          evt.preventDefault();
         
      },
      handleClose(done) {
      },
      checkfun() {
        this.$emit('checkfun')
      },
      showfun() {
      },
      checkTui(val) {

        
      },
    }
  }
</script>
<style  scoped>
.box{
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  border:1px solid #ccc;
    padding:5px;
  

}

.drag-item{
    
    background: #ddd;
    display: inline-block;
    width: 45%;
    overflow-y: hidden;
    margin: 0;
}

</style>
